/*
 * @Author: una
 * @Date: 2021-12-31 15:32:59
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-01 09:39:29
 * @Description: file content
 */ 
import styles from "./loading.module.less" //loading元素样式
import loadingSrc from "@/assets/loading.svg" //loading元素路径

// 查找el页面中loading元素
function getLoadingImage(el){
    return el.querySelector("img[data-role=loading]")
}

// 创建loading元素
function createLoadingImg(){
    const img = document.createElement("img");
    img.className = styles.loading;
    img.src = loadingSrc
    img.dataset.role = "loading" //给loading元素img添加唯一标识和el页面中其他img区别开
    return img;
}

//loading指令配置对象
export default function(el, binding){ //loading指令配置对象的简写
    // 根据binding.value（数据是否请求回来）决定创建或删除loading元素
    const curImg = getLoadingImage(el) //查找el页面下是否是否有loading元素

    if(binding.value){ //数据还没有请求回来
        if(!curImg){ //el页面下没有loading元素
            const img = createLoadingImg() //创建loading元素
            el.appendChild(img) //添加到el页面中展示
        }
    }else{ //数据请求回来
        if(getLoadingImage(el)){
            el.removeChild(getLoadingImage(el))
        }
    }
}
